<template>
  <div class="per-box">
    <head1></head1>
    <el-row justify="center" type="flex" class="per">
      <el-col :span="20">
        <div class="per-body">
          <el-container>
            <el-container>
              <el-aside class="aside">
                <el-menu default-active="1" @select="changeRoute" class="el-menu-vertical-demo navs">
                  <el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">首页</span>
                  </el-menu-item>
                  <el-submenu index="2">
                    <template slot="title">
                      <i class="el-icon-user-solid"></i>
                      <span>个人中心</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item index="2-1"><i class="el-icon-user"></i>账户管理</el-menu-item>
                      <el-menu-item index="2-2"><i class="el-icon-location"></i>收货地址管理</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                  <el-menu-item index="3">
                      <i class="el-icon-s-order"></i>
                      <span slot="title">订单中心</span>
                    </el-menu-item>
                  <el-menu-item index="4">
                    <i class="el-icon-menu"></i>
                    <span slot="title" @click.prevent="loginout">退出登录</span>
                  </el-menu-item>
                </el-menu>
              </el-aside>
              <el-main class="main">
                <router-view></router-view>
              </el-main>
            </el-container>
          </el-container>
        </div>
      </el-col>
    </el-row>
    <footer1></footer1>
  </div>
</template>
<script>
import head1 from '@/components/head'
import footer1 from '@/components/footer'
export default {
  data () {
    return {

    }
  },
  components: {
    head1,
    footer1
  },
  computed: {

  },
  methods: {
    changeRoute (index) {
      let map = new Map()
      map.set('1', 'homePage')
      map.set('2-1', 'information')
      map.set('2-2', 'address')
      map.set('3', 'ordercenter')
      let routeUrl = map.get(index)
      this.$router.push(routeUrl)
    },
    loginout () {
      sessionStorage.removeItem('user_id')
      this.$router.push('/')
      this.$message({
        type: 'success',
        message: '退出登录成功!!!'
      })
    }
  },
  mounted () {

  }
}
</script>

<style lang="scss">
  @import '../assets/style/common.scss';
  .per-box {
    background-color: #f4f4f4;
    .per {
      .per-body {
        margin: 30px 0px 30px 0px;
        width: 100%;
        background-color: #f4f4f4;
        .aside {
          height: 600px;
          background-color: white;
          .navs{
            border: none;
          }
        }
        .main {
          margin-left: 15px;
          height: 600px;
          background-color: white;
        }
      }
    }
  }
</style>
